<template>
  <div class="page_chongwu">
    <!-- 头部 -->
    <van-nav-bar
      :fixed="true"
      :safe-area-inset-top="true"
      :border="false"
      :class="{ 'header-scrolled': isScrolled }"
    >
      <template #left>
        <div @click="onClickLeft" class="iconfont icon-back"></div>
      </template>
      <template #right>
        <div @click="shareFn" class="iconfont icon-fenxiang08-F upload"></div>
      </template>
    </van-nav-bar>
    <!-- 头部宠物轮播图 -->
    <!-- 1. 隐藏轮播图 -->
    <div class="page_chongwu_header_swiper">
      <van-swipe lazy-render :loop="true">
        <van-swipe-item
          @click="itemImageFn(imgList.length, item.src)"
          v-for="(item, index) in imgList"
          :key="index"
        >
          <img :src="item.src" alt="" />
        </van-swipe-item>

        <template #indicator="{ active, total }">
          <div class="custom_indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>
    <!-- 宠物页-轮播图 下的数据 -->
    <PageChongwuText @open-action-sheet="openActionSheet" />
    <!-- 弹窗组件 map - phone -->
    <ActionSheetPopup
      v-model:show="showActionSheet"
      :actions="currentActions"
      :description="currentDescription"
      @close="closeActionSheet"
      @after-leave="isAnimating = false"
    ></ActionSheetPopup>
    <!-- 分享面板 -->
    <van-share-sheet
      v-model:show="showShare"
      title="Share to"
      :options="options"
      cancel-text=""
      closeable
    />

    <!-- 底部按钮组件 -->
    <PageChongwuButton></PageChongwuButton>
  </div>
</template>

<script setup>
import { ref, onUnmounted, onMounted } from "vue";
import itemIndexImage from "@/assets/yisheng.webp";
import { useRouter } from "vue-router";
import PageChongwuText from "@/view/PageChongwuText.vue";
import PageChongwuButton from "@/view/PageChongwuButton.vue";
import ActionSheetPopup from "../../ActionSheetPopup.vue";
const showShare = ref(false);
const isScrolled = ref(false);

const router = useRouter();
const imgList = [
  {
    src: itemIndexImage,
  },
  {
    src: itemIndexImage,
  },
  {
    src: itemIndexImage,
  },
  {
    src: itemIndexImage,
  },
  {
    src: itemIndexImage,
  },
  {
    src: itemIndexImage,
  },
  {
    src: itemIndexImage,
  },
];

// 图点击事件
const itemImageFn = (total, src) => {
  //  跳转画廊展示页
  router.push({
    name: "Gallery",
    query: {
      // 全部通过query传递
      total: total,
      src: src,
      text: "Album",
    },
  });
};

// 数据定义
const showActionSheet = ref(false);
const isAnimating = ref(false);
const currentActions = ref([]);
const currentDescription = ref("");
// 地图和电话的 actions 数据
const mapActions = [
  { name: "System map", icon: "iconfont icon-xiaofeiji" },
  { name: "Google map", icon: "iconfont icon-xiaofeiji" },
  { name: "Apple map", icon: "iconfont icon-xiaofeiji" },
];
const phoneActions = [{ name: "983628372" }, { name: "983628371" }];
// 打开弹窗
const openActionSheet = (type) => {
  if (type === "map") {
    currentActions.value = mapActions;
    currentDescription.value = "Select Map";
  } else if (type === "phone") {
    currentActions.value = phoneActions;
    currentDescription.value = "Phone Call";
  }

  isAnimating.value = true;
  showActionSheet.value = true;
};
// 关闭弹窗
const closeActionSheet = () => {
  isAnimating.value = true;
  setTimeout(() => {
    isAnimating.value = false;
  }, 300); // 匹配 Vant 默认动画时长
};
const onClickLeft = () => history.back();
const shareFn = () => {
  showShare.value = !showShare.value;
};

// 分享面板配置
const chareMessage = new URL("@/assets/Message.jpg", import.meta.url).href;
const chareWhatsApp = new URL("@/assets/WhatsApp.webp", import.meta.url).href;
const chareFacebook = new URL("@/assets/Facebook.webp", import.meta.url).href;
const chareStory = new URL("@/assets/Story.png", import.meta.url).href;
const options = [
  [
    { name: "Message", icon: chareMessage },
    { name: "WhatsApp", icon: chareWhatsApp },
    { name: "Facebook", icon: chareFacebook },
    { name: "Story", icon: chareStory },
  ],
  [
    { name: "Copy link", icon: "link-o" },
    { name: "More", icon: "ellipsis" },
  ],
];
// 滚动事件处理
const handleScroll = () => {
  isScrolled.value = window.scrollY > 50;
};
onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>
 
<style  lang="scss">
.page_chongwu {
  position: relative;
  .van-nav-bar {
    background: transparent;
    z-index: 999;
    &.header-scrolled {
      background: rgba(255, 255, 255, 1);
      .iconfont {
        background: transparent;
        color: #000;
        font-size: 18px;
      }
    }
    .iconfont {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 20px;

      &.icon-back {
        left: 15px;
        padding-left: 5px;
        box-sizing: border-box;
      }

      &.upload {
        right: 15px;
      }
    }
  }

  .page_chongwu_header_swiper {
    .van-swipe {
      .van-swipe__track {
        .van-swipe-item {
          width: 375.33px;
          height: 230px;
          img {
            display: block;
            width: 100%;
            object-fit: cover;
          }
        }
      }

      .custom_indicator {
        position: absolute;
        right: 10px;
        bottom: 15px;
        padding: 2px 6px;
        font-size: 14px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 20px;
        color: #fff;
      }
    }
    /* 或者通过动态类名 */

    &.show-ratings {
      display: none;
    }
  }
}
</style>